<template>
	<view class="bg ">
		<!-- 个人资料背景 -->
		<view class="">
			<view class="d-flex">

				<image @tap="login" v-if="hasLogin==false" src="@/static/img/user/touxiang.png" mode="widthFix"
					style="width: 134rpx; margin: 123rpx 20rpx 37rpx 30rpx; height: 134rpx;"></image>

				<image v-else :src="uIfo.avatar" mode="aspectFill"
					style="width: 134rpx; margin: 123rpx 20rpx 37rpx 30rpx; height: 134rpx; border-radius: 67rpx;">
				</image>

				<view class="d-flex user">
					<view class="flex-column white">
						<view class="" v-if="hasLogin==false" @tap="login">点击登陆</view>
						<view class="" v-else>{{uIfo.nickname}}</view>
					</view>
					<view class="d-flex right" @tap="userData">
						<view class="">个人资料</view>
						<image class="ricon" src="@/static/img/user/xiangyou.png" mode="widthFix"
							style="width: 13rpx; height: 15rpx;"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 会员开通 -->
		<!-- <view class="vips">
			<view class="vip-text">开通vip会员可专享价购酒</view> -->
		<!-- <view class="open-vip" @tap="vip" style="margin-right: 20upx;">开通会员</view> -->
		<!-- </view> -->

		<view class="orders">
			<view class="dingdan d-flex">
				<view class="flex-1 order" style="font-size: 30upx;">我的订单</view>
				<view class=" right-order" style="font-size: 30upx;" @tap="shopOrders(-1,'全部')">查看全部</view>
				<image src="@/static/img/user/right.png" mode="widthFix"
					style="width: 13rpx; margin-left:20upx;margin-top: 10rpx;"></image>
			</view>
			<view class="" style="margin-top: 30upx;">
				<view class="d-flex j-sa" style="justify-content: space-between;">
					<view class="ls-text" @tap="shopOrders(0,'待付款')">
						<image class="order-item-img" src="@/static/img/user/daifukuan.png" mode="widthFix"></image>
						<view class="">待付款</view>
					</view>
					<view class=" ls-text" @tap="shopOrders(1,'待发货')">
						<image class="order-item-img" src="@/static/img/user/daifahuo.png" mode="widthFix"></image>
						<view class="">待发货</view>
					</view>
					<view class=" ls-text" @tap="shopOrders(10,'待收货')">
						<image class="order-item-img" src="@/static/img/user/daishouhuo.png" mode="widthFix"></image>
						<view class="">待收货</view>
					</view>
					<view class=" ls-text" @tap="shopOrders(20,'已完成')">
						<image class="order-item-img" src="@/static/img/user/daipingjia.png" mode="widthFix"></image>
						<view class="">已完成</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 常用工具 -->
		<view class="vip" style="position: absolute;top:651upx;">
			<view class="dingdan d-flex">
				<view class="flex-1 order dingdan">常用工具</view>
			</view>
			<view class="" style="margin-top: 20upx;">
				<view class="d-flex j-sa" style="justify-content: space-between;">
					<view class="ls-text " @tap="collect">
						<image class="ls-text-img" src="@/static/img/user/wodeshouchang.png" mode="widthFix"></image>
						<view class="lp">我的收藏</view>
					</view>
					<view class="ls-text " @tap="look">
						<image class="ls-text-img" src="@/static/img/user/wodeliulan.png" mode="widthFix"></image>
						<view class="lp">浏览历史</view>
					</view>
					<view class=" ls-text" @tap="news">
						<image class="ls-text-img" src="@/static/img/user/wodexiaoxi.png" mode="widthFix"></image>
						<view class="lp">消息中心</view>
					</view>
					<view class="ls-text" @tap="invoice">
						<image class="ls-text-img" src="@/static/img/user/wodeqianbao.png" mode="widthFix"></image>
						<view class="lp">发票管理</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 我的服务 -->
		<view class="vip" style="position: absolute;top:922upx;">
			<view class="dingdan d-flex">
				<view class="flex-1 order dingdan">我的服务</view>
			</view>
			<view class=" flex-wrap" style="margin-top: 35upx;">
				<view class="d-flex  flex-wrap"
					style="display: flex;align-items: center;justify-content: space-between;">
					<view class="service-item" @tap="Setup">
						<image class="service-item-img" src="@/static/img/user/shezhi.png" mode="widthFix"></image>
						<view class="">设置中心</view>
					</view>
					<view class="service-item" @tap="address">
						<image class="service-item-img" src="@/static/img/user/shouhuodizhi.png" mode="widthFix">
						</image>
						<view class="">收货地址</view>
					</view>
					<view class="service-item" @tap="Goyijian">
						<image class="service-item-img" src="@/static/img/user/yijianfankui.png" mode="widthFix">
						</image>
						<view class="">意见反馈</view>
					</view>
					<view class="service-item" @click="toggle()">
						<image class="service-item-img" src="@/static/img/user/zaixiankefu.png" mode="widthFix"></image>
						<view class="">联系客服</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<view class="mark1" v-show="isShowKefu">
				<view class="banks-list">
					<image src="@/static/img/user/guanbi.png"
						style="width:23rpx;height:23rpx;position: absolute;right:50rpx;top:30rpx;" @tap="cancle()">
					</image>
					<view class="banks-list1">
						<!-- <view class="banks-list1-left">
							<image class="image1" src="/static/images/rengongdianhua.png"
								style="width:63rpx;height:64rpx;"></image>
						</view> -->
						<view class="banks-list1-center">
							<text class="text1">电话人工客服</text>
							<text class="text2">周一至周五</text>
						</view>
						<view class="banks-list1-right" @tap="callPhone()">
							<image class="image2" src="/static/img/user/rengongdianhua.png"
								style="width:63rpx;height:64rpx;">
							</image>
						</view>
					</view>

				</view>
			</view>
			<!-- <uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="d-flex popup-content">
					<view class="kf">客服电话</view>
					<view class="dh">0371-63213817</view>
					<image src="/static/img/user/rengongdianhua.png" mode="widthFix" style="width: 63upx;"></image>
				</view>
			</uni-popup> -->
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				uIfo: {},
				islogin: false,
				isShowKefu: false,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...'
			});

			if (this.hasLogin) {
				this.loadData();
			}

			setTimeout(() => {
				uni.hideLoading();
			}, 600)

			uni.$on('changeNickname', (option) => {
				this.uIfo.nickname = option.nickname;
			})
		},
		onPullDownRefresh() {
			this.loadData()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000);
		},

		methods: {
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle() {
				this.isShowKefu = true;
			},

			async shopOrders(status, title) {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				let url = '/pages/user/user-order?status=' + status;
				uni.navigateTo({
					url: url
				})

			},

			async loadData() {
				let token = uni.getStorageSync('token');

				if (!token) {
					this.$api.msg('token缺失！');
				}
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: token
					},
					methods: 'post'
				})

				let info = res.data.data;

				this.uIfo = info;
				this.uIfo.avatar = this.uIfo.avatar ? this.uIfo.avatar : '/static/img/user/touxiang.png';
			},

			vip() {
				uni.navigateTo({
					url: './vip'
				})
			},
			userData() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: './userData'
				})
			},

			address() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: '/pages/user/address'
				})
			},
			login() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},

			collect() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: '/pages/user/collect'
				})
			},

			look() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: '/pages/user/look'
				})
			},

			Setup() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}
				uni.navigateTo({
					url: '/pages/user/setup'
				})
			},

			Goyijian() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: '/pages/user/user-yijian'
				})
			},
			invoice() {
				uni.showToast({
					title: '正在升级',
					icon: 'none'
				})
				// uni.navigateTo({
				// 	url: './invoice'
				// })
			},
			news() {
				uni.showToast({
					title: '正在升级',
					icon: 'none'
				})
				// uni.navigateTo({
				// 	url: './news'
				// })
			},

			async callPhone() {
				uni.makePhoneCall({
					phoneNumber: '0371-63213817'
				});
			},

			//取消
			async cancle() {
				this.isShowKefu = false;
			},
		}
	}
</script>
<style>
	page {
		min-height: 1200upx;
	}
</style>
<style lang="scss">
	.popup-content {
		height: 300rpx;
	}

	.kf {
		background-color: #e80909;
		color: white;
		padding: 10rpx;
		margin-top: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.dh {
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.bg {
		background-image: url('../../static/img/user/back.png');
		width: 750rpx;
		height: 530rpx;
	}

	page {
		background-color: #f0efee;
	}

	.user {
		.white {
			color: white;
			margin: 160rpx 0 0 0;
			letter-spacing: 3rpx;
		}

		.q1 {
			margin-top: 20rpx;
			font-size: 24rpx;
		}

		.right {
			color: white;
			background-color: #fcaa59;
			position: absolute;
			height: 40rpx;
			padding: 10rpx 20rpx;
			top: 170rpx;
			right: 0;
			border-radius: 50rpx 0 0 50rpx;
			font-size: 26rpx;
			letter-spacing: 2rpx;
		}

		.ricon {
			margin-left: 15rpx;
			margin-top: 10rpx;
		}
	}

	.order-item-img {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10upx;
	}

	.vip {
		background-color: white;
		width: 638upx;
		left: 24upx;
		// height: 100%;
		margin: 0 auto;
		// margin-left: 3%;
		padding: 33upx;
		border-radius: 20rpx;
		font-size: 28rpx;

		.dingdan {
			// margin-top: 20rpx;

			.order {
				// margin-left: 35rpx;
				letter-spacing: 2rpx;
				font-size: 30rpx;
			}

			.right-order {
				color: #6f6f6f;
				letter-spacing: 2rpx;
				margin-right: 10rpx;
				font-size: 28rpx;
			}
		}
	}

	.ls {
		// margin-left: 15rpx;
		text-align: center;
		align-items: center;
		margin: 0 20rpx;
	}

	.ls-text {
		// margin-left: 30rpx;
		// margin-top: 20rpx;
		letter-spacing: 3rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// margin-bottom: 20rpx;
	}

	.ls-text-img {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10upx;
	}

	.vips {
		position: absolute;
		top: 292upx;
		width: 702upx;
		height: 90upx;
		left: 24upx;
		background-image: url('/static/img/user/vip.png');
		background-size: cover;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.open-vip {
		font-size: 26rpx;
		background-color: #ffe8ab;
		width: 138rpx;
		height: 52upx;
		border-radius: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.vip-text {
		color: white;
		font-size: 26rpx;
		letter-spacing: 2rpx;
		margin-left: 162upx;
	}

	.orders {
		position: absolute;
		top: 382upx;
		width: 638upx;
		height: 184upx;
		left: 24upx;
		background-color: #fff;
		border-radius: 20upx;
		padding: 32upx;
	}

	.l1 {
		width: 120rpx;
		height: 100rpx;
		margin-left: 45rpx;
		text-align: center;
		margin-top: 20rpx;
		letter-spacing: 3rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;

	}

	.ls {
		// margin-left: 15rpx;
		text-align: center;
		align-items: center;
		margin: 0 20rpx;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.service-item-img {
		width: 53rpx;
		height: 53rpx;
		margin-bottom: 20upx;
	}

	.division {
		height: 20upx;
	}

	.mark1 {
		z-index: 100;
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0rpx;
		bottom: 0rpx;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 2px -3px 100px -5px #FFFFFF;

		.banks-list {
			position: fixed;
			height: 340rpx;
			bottom: 0rpx;
			background-color: #fff;
			width: 100%;

			.banks-list-title {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #ebebeb;
				position: relative;
			}

			.banks-list1 {
				padding-top: 80rpx;
				// height: 230rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				margin: 0 66rpx;

				.banks-list1-center {
					display: flex;
					flex-direction: column;
					align-items: left;

					.text1 {
						/* font-weight: bold; */
						line-height: 50rpx;
					}

					.text2 {
						color: #959595;
						font-size: 26rpx;
					}
				}
			}

			.banks-list-button {
				padding-top: 20rpx;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
